<template>
  <div>
    <Header />
    <div class="my">
      <div class="my_head">
        <img :src="img" alt class="deta_head" v-if="img" />
        <!-- <img src="../../assets/image/gd.png" alt /> -->
        <img src="../../assets/image/head.png" alt v-else />
        <p @click="Onsign" v-if="!userId">登录</p>
      </div>
      <div class="my_list" @click="OnList('我的足迹')">
        <div class="list_text">
          <img src="../../assets/image/wdzj.png" alt />
          我的足迹
        </div>
        <div class="list_right">
          <img src="../../assets/image/gd.png" alt class="list_right" />
        </div>
      </div>
      <div class="my_list" @click="OnList('我的关注')">
        <div class="list_text">
          <img src="../../assets/image/wdgz.png" alt />
          我的关注
        </div>
        <div class="list_right">
          <img src="../../assets/image/gd.png" alt class="list_right" />
        </div>
      </div>
      <div class="my_list" @click="OnList('我的订阅')">
        <div class="list_text">
          <img src="../../assets/image/wddy.png" alt />
          我的订阅
        </div>
        <div class="list_right">
          <img src="../../assets/image/gd.png" alt class="list_right" />
        </div>
      </div>
      <div class="my_list" @click="OnList('拍卖提醒')">
        <div class="list_text">
          <img src="../../assets/image/pmtx.png" alt />
          拍卖提醒
        </div>
        <div class="list_right">
          <img src="../../assets/image/gd.png" alt class="list_right" />
        </div>
      </div>
      <div class="my_list" @click="Onmodify">
        <div class="list_text">
          <img src="../../assets/image/szzl.png" alt />
          设置资料
        </div>
        <div class="list_right">
          <img src="../../assets/image/gd.png" alt class="list_right" />
        </div>
      </div>
      <div class="my_btn" v-if="userId" @click="Onsignout">退出登录</div>
    </div>
    <!-- <Footer /> -->
  </div>
</template>
<script>
import rem from "@/assets/js/rem.js";
import Header from "@/components/m_file/header.vue";
import Footer from "@/components/m_file/footer.vue";
export default {
  data() {
    return {
      userId: "",
      img: ""
    };
  },
  mounted() {
    this.userId = sessionStorage.getItem("userId");
    this.OngetPersonalInfo();
  },
  // $route() {
  //   this.userId = this.$route.params.userId;
  // },
  methods: {
    OngetPersonalInfo() {
      const userId = sessionStorage.getItem("userId");
      this.instance
        .getPersonalInfo({
          id: userId
        })
        .then(res => {
          this.img = res.data.data.headUrl;
        })
        .catch(function(error) {});
    },
    Onsignout() {
      this.instance
        .fastLogout({})
        .then(res => {})
        .catch(function(error) {});
      sessionStorage.setItem("token", "");
      sessionStorage.setItem("photo", "");
      sessionStorage.setItem("userId", "");
      this.userId = "";
      this.img = "";
    },
    Onsign() {
      this.$router.push({
        name: "M_sign"
      });
    },
    Onmodify() {
      console.log(this.userId);
      if (this.userId) {
        this.$router.push({
          name: "Modify_data"
        });
      } else {
        this.$notify({
          message: "请先登录",
          duration: 2000
        });
      }
    },
    OnList(val) {
      if (this.userId) {
        console.log(val);
        this.$router.push({ name: "M_myList", params: { text: val } });
      } else {
        this.$notify({
          message: "请先登录",
          duration: 2000
        });
      }
    }
  },
  components: {
    Header,
    Footer
  }
};
</script>
<style lang="less" scoped>
.my {
  padding-bottom: 50px;
}
.my_head {
  height: 1.86rem;
  text-align: center;
  background: url("~@/assets/image/background.png") no-repeat;
  background-size: 100%;

  img {
    width: 0.6rem;
    height: 0.6rem;
    margin: 0.4rem auto 0;
  }
  p {
    width: 0.83rem;
    margin: 0 auto;
    background: #f5f4f459;
    border-radius: 36px;
    font-size: 0.14rem;
    color: #ffffff;
    text-align: center;
    line-height: 0.36rem;
  }
}
.my_list {
  overflow: hidden;
  margin: 0.1rem 0.15rem;
  .list_text {
    float: left;
    font-size: 0.15rem;
    font-weight: bold;
    color: #333333;
    line-height: 52px;
    img {
      width: 0.18rem;
      vertical-align: middle;
      margin-right: 0.1rem;
    }
  }
  .list_right {
    float: right;
    width: 0.06rem;
    margin-top: 0.05rem;
  }
}
.my_btn {
  border: 1px solid #d2d2d2;
  border-radius: 10px;
  font-size: 0.14rem;
  color: #969696;
  margin: 0.2rem 0.15rem 0.4rem 0.15rem;
  text-align: center;
  line-height: 0.48rem;
}
</style>
